<!-- 
  @author: SM
  @desc: 分页 
-->
<template>
  <div v-if="isShow" id="pro-table-wrapper-pagination">
    <el-pagination background @current-change="sizeChange" @size-change="pageSizeChange" :current-page="currentPage"
      :layout="layout" :page-sizes="pageSizes" :page-size="pageSize" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'pagination-field',
  data() {
    return {
    }
  },
  mounted() {
    let that = this
    this.$nextTick(function () {
      //
      let sizeel = that.$el.querySelector('.el-pagination__sizes .el-input__inner')
      sizeel && sizeel.setAttribute('UNSELECTABLE', 'no')
      sizeel && sizeel.setAttribute('onfocus', 'this.blur()')
    })
  },
  // 方法
  methods: {
    // 点击页面改变
    sizeChange(num) {
      this.$emit('pageClick', num)
    },
    //
    pageSizeChange(num) {
      this.$emit('limitClick', num)
    }
  },
  //
  props: {
    // 是否显示
    isShow: {
      type: Boolean,
      default: true
    },
    // 分页布局
    layout: {
      type: String,
      default: 'total,prev,pager,next,sizes,jumper'
    },
    // 总记录数
    total: {
      type: Number,
      default: 0
    },
    // 每页显示多少条
    pageSize: {
      type: Number,
      default: 10
    },
    // 默认显示第几页
    currentPage: {
      type: Number,
      default: 1
    },
    /**
     * 每页显示个数选择器的选项设置
     */
    pageSizes: {
      type: [Object, Array],
      default: () => { return [10, 20, 30, 40, 50, 100] }
    }
  }
}
</script>
<style lang="scss">
#pro-table-wrapper-pagination {
  height: 68px !important;
  text-align: right;

}
</style>